import { useQuasar } from '@teld/q-components';
import { defineComponent, provide, toRef, watchEffect } from 'vue';

import FilterLayout from './filter-layout.jsx';
import { useOperationProps } from './use-col-filter.js';
import TSelect from 't/basic/select'

export default defineComponent({
  name: 'TDataGridColFilterSelect',
  props: {
    ...useOperationProps,
  },
  emits: ['update:operation', 'change'],

  setup(props, { attrs, emit, expose, slots }) {
    const filterOperations = ['='];

    const $q = useQuasar();

    const operation = toRef(props.operation);

    provide('operation', operation);

    watchEffect(() => {
      emit('update:operation', operation.value);
      emit('change');
    });

    const options = [
      { label: '', value: void 0 },
      { label: $q.lang.dataGrid?.true, value: true },
      { label: $q.lang.dataGrid?.false, value: false },
    ];

    return () => {
      return (
        <FilterLayout>
          {{
            prepend: () => {},
            default: () => {
              return (
                <TSelect
                  style={{ marginLeft: '4px'}}
                  tabindex='1'
                  borderless
                  outlined={false}
                  v-model={operation.value.filterValue}
                  options={options}
                />
              );
            },
          }}
        </FilterLayout>
      );
    };
  },
});
